<style lang="less">
@import "./hotelManage.less";
</style>
<template>
  <div class="search" style="background-color:white">
    <template>
      <Form ref="hotelDetailForm" :model="hotelDetailForm" :label-width="110" :rules="hotelDetailFormValidate">
        <Tabs type="card" ref="hotelDetailTab">
          <TabPane label="基础信息" style="border-left: 1px solid #dddee1;">
            <Form-item label="酒店标题:" prop="title" style="padding-top:16px;">
              <Input type="text" v-model="hotelDetailForm.title" clearable placeholder="请输入酒店标题" style="width: 500px" />
            </Form-item>
            <Form-item label="酒店卖点:" prop="sellpoint">
              <Input type="text" v-model="hotelDetailForm.sellpoint" clearable placeholder="请输入酒店卖点" style="width: 500px" />
            </Form-item>
            <Form-item label="酒店地址:" prop="address">
              <Input type="text" v-model="hotelDetailForm.address" clearable placeholder="请输入酒店地址" style="width: 500px" />
            </Form-item>
            <Form-item label="酒店坐标:">
              <div style="display:inline-block">
                <span>经度(Lng):</span>
                <Input type="text" v-model="hotelDetailForm.lng" clearable style="width: 120px;margin-right:20px;" />
                <span>纬度(Lat):</span>
                <Input type="text" v-model="hotelDetailForm.lat" clearable style="width: 120px;margin-right:20px;" />
                <Button icon="android-apps">选择</Button>
              </div>
            </Form-item>
            <Form-item label="联系电话:" prop="telephone">
              <Input type="text" v-model="hotelDetailForm.telephone" clearable placeholder="请输入联系电话" style="width: 220px" />
            </Form-item>
            <Form-item label="开业时间:" prop="opentime">
              <DatePicker type="date" v-model="hotelDetailForm.opentime" placeholder="请选择开业时间" style="width: 220px"></DatePicker>
            </Form-item>
            <Form-item label="装修时间:" prop="decoratetime">
              <DatePicker type="date" v-model="hotelDetailForm.decoratetime" placeholder="请选择装修时间" style="width: 220px"></DatePicker>
            </Form-item>

            <hr style="border-bottom:1px solid #dddee1; height:1px;">

            <Form-item label="属性:" prop="property" style="padding-top:16px;">
              <Button icon="android-apps" @click="hotelDetailPropertySelect">选择</Button>
            </Form-item>
            <Form-item label="星级:" prop="hotelRankid">
              <Select v-model="hotelDetailForm.hotelRankid" placeholder="请选择" clearable style="width: 220px">
                <Option value="5">五星级酒店</Option>
                <Option value="4">四星级酒店</Option>
                <Option value="3">三星级酒店</Option>
                <Option value="2">二星级酒店</Option>
                <Option value="1">一星级酒店</Option>
              </Select>
            </Form-item>

            <hr style="border-bottom:1px solid #dddee1; height:1px;">

            <Form-item label="图标设置:" prop="tagword" style="padding-top:16px;">
              <Button icon="android-apps" @click="hotelDetailTagSelect">选择</Button>

              <div>
                <Tag v-for="item in selectedTagsArr" type="border" closable color="green" :key="item.id" :name="item.id" :checked="item.checked" @on-close="tagsCloseHandle">{{item.name}}</Tag>
              </div>

            </Form-item>
            <Form-item label="显示数据:">
              <div style="display:inline-block">
                <!-- <span>推荐次数:</span>
                    <Input type="text" v-model="hotelDetailForm.RecommendNum" clearable style="width: 120px;margin-right:20px;"/> -->
                <span>满意度:</span>
                <Input type="text" v-model="hotelDetailForm.satisfyscore" clearable style="width: 176px;margin-right:20px;" />
              </div>
            </Form-item>

            <hr style="border-bottom:1px solid #dddee1; height:1px;">

          </TabPane>

          <TabPane label="酒店详情">
            <template>
              <Form-item label="酒店详情" prop="content" style="padding-top:16px;">
                <textarea type="text" v-model="hotelDetailForm.content" clearable placeholder="酒店详情" style="width:600px;height:200px;resize:none;line-height:2.0" />
              </Form-item>
            </template>
          </TabPane>

          <TabPane label="服务项目">
            <template>
              <Form-item label="服务项目" prop="service" style="padding-top:16px;">
                <textarea type="text" v-model="hotelDetailForm.service" clearable placeholder="服务项目" style="width:600px;height:200px;resize:none;line-height:2.0" />
              </Form-item>
            </template>
          </TabPane>

          <TabPane label="交通指南">
            <template>
              <Form-item label="交通指南" prop="traffic" style="padding-top:16px;">
                <textarea type="text" v-model="hotelDetailForm.traffic" clearable placeholder="交通指南" style="width:600px;height:200px;resize:none;line-height:2.0" />
              </Form-item>
            </template>
          </TabPane>

          <TabPane label="注意事项">
            <template>
              <Form-item label="注意事项" prop="notice" style="padding-top:16px;">
                <textarea type="text" v-model="hotelDetailForm.notice" clearable placeholder="注意事项" style="width:600px;height:200px;resize:none;line-height:2.0" />
              </Form-item>
            </template>
          </TabPane>

          <TabPane label="周边景点">
            <template>
              <Form-item label="周边景点" prop="arroundspots" style="padding-top:16px;">
                <textarea type="text" v-model="hotelDetailForm.arroundspots" clearable placeholder="周边景点" style="width:600px;height:200px;resize:none;line-height:2.0" />
              </Form-item>
            </template>
          </TabPane>

          <TabPane label="图片">
            <template>
              <div>
                <div style="padding-top:20px;padding-left:20px;">封面图片</div>
                <image-component 
                    ref="hotelLitpicComp"
                    @on-remove-success="hotelLitpicRemoveSuccess"
                    @on-add-success="hotelLitpicAddSuccess">
                  </image-component>

                <hr style="border-bottom:1px solid #dddee1; height:1px;">

                <div style="padding-top:20px;padding-left:20px;">详情列表图片</div>
                <image-component 
                    ref="hotelPiclistComp"
                    @on-remove-success="hotelPiclistRemoveSuccess"
                    @on-add-success="hotelPiclistAddSuccess">
                  </image-component>
              </div>

            </template>
          </TabPane>

        </Tabs>
      </Form>
      <div style="padding:16px 0px;margin-left:2px;" class="operation">
        <!-- <Button @click="delAll" type="ghost" icon="trash-a">批量删除</Button> -->
        <Button @click="cancelSubmitHotel" type="ghost" icon="android-arrow-back" style="width:120px;margin-right:10px;">返回主页</Button>
        <Button :loading="submitLoading" @click="submitHotel" type="primary" :icon="hotelButtonTypeIcon" style="width:120px;">{{hotelButtonTypeText}}</Button>
      </div>
    </template>

    <Modal :title="modalTitle" v-model="hotelDetailPropetyModalVisible" :mask-closable='false' :width="500">
      <Form ref="hotelDetailPropetyForm" :model="hotelDetailPropetyForm" :label-width="90">
        <FormItem label="连锁酒店:">
          <CheckboxGroup>
            <Checkbox label="0">七天连锁</Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="特色服务:">
          <CheckboxGroup>
            <Checkbox label="0">叫醒服务</Checkbox>
            <Checkbox label="1">洗衣服务</Checkbox>
            <Checkbox label="2">免费停车</Checkbox>
          </CheckboxGroup>
        </FormItem>
        <!-- <div style="border-bottom:1px solid #dddee1; margin:10px 0;"></div>    -->
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelHotelReview">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submitHotelReview">确定</Button>
      </div>
    </Modal>
    <Modal :title="modalTitle" v-model="hotelDetailTagModalVisible" :mask-closable='false' :width="500">
      <div>
        <Tag type="border" color="yellow">标签一</Tag>
        <Tag type="border" color="yellow">标签二</Tag>
        <Tag type="border" color="yellow">标签三</Tag>
        <Tag type="border" color="yellow">标签四</Tag>
        <Tag type="border" color="yellow">标签五</Tag>
      </div>
      <div slot="footer">
        <Button type="text" @click="cancelHotelReview">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submitHotelReview">确定</Button>
      </div>
    </Modal>

    <!-- <my-dialog></my-dialog> -->
    <tag-modal ref="tagModal" @on-tag-checked="tagCheckedBack"></tag-modal>

  </div>
</template>

<script>
import dateFormatUtil from "@/utils/dateFormatUtil";
import TagModal from "./tagModal";
import ImageComponent from "./../comm-comp/imageComponent.vue";

export default {
  name: "hotel-detail",
  components: {
    TagModal,
    ImageComponent
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码长度不得小于6位"));
      } else {
        callback();
      }
    };
    const validateMobile = (rule, value, callback) => {
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };

    return {
      loading: true,
      modalTitle: "",

      //hotelDetail start
      hotelDetailPropetyModalVisible: false,
      hotelDetailTagModalVisible: false,
      hotelButtonTypeText: "添加",
      hotelButtonTypeIcon: "plus-round",
      hotelRoomButtonTypeText: "添加房型",
      hotelRoomButtonTypeIcon: "plus-round",
      hotelDetailForm: {
        title: "",
        sellpoint: "",
        address: "",
        lng: "",
        lat: "",
        telephone: "",
        opentime: "",
        decoratetime: "",
        property: "",
        hotelRankid: "",
        tagword: "",
        satisfyscore: "",
        content: "",
        service: "",
        traffic: "",
        notice: "",
        arroundspots: "",
        litpic: "",
        piclist:""
      },
      hotelDetailFormValidate: {
        title: [
          { required: true, message: "酒店标题不能为空", trigger: "blur" },
          { max: 64, message: "酒店标题不能超过64个字符" }
        ]
      },
      submitLoading: false,
      currSelectedSupplier:"", //选择供应商组件 返回供应商对象
      selectedTagsArr: [],
      hotelDetailPropetyForm:{

      },
      hotelReviewFormValidate: {
      }
      //hotelDetail end
    };
  },
  methods: {
    resetFormByType: function(type,updateHotel){
      console.log(updateHotel);
      // this.currSelectedSupplier = "";
      if(0 === type){
        this.hotelDetailModalType = 0;
        this.hotelButtonTypeText = "添加";
        this.hotelButtonTypeIcon = "plus-round";

        this.$refs.hotelLitpicComp.initByType("hotel",0,null);
        this.$refs.hotelPiclistComp.initByType("hotel",0,null);
      }else if(1 === type){
        this.hotelDetailModalType = 1;
        this.hotelButtonTypeText = "编辑";
        this.hotelButtonTypeIcon = "edit";
        // this.currSelectedSupplier = updateGoods.supplier;
        this.hotelDetailForm = updateHotel;

        this.$refs.hotelLitpicComp.initByType("hotel",1,updateHotel.litpic);
        this.$refs.hotelPiclistComp.initByType("hotel",1,updateHotel.piclist);
        
      }else{}

      this.$refs.hotelDetailForm.resetFields();
      for (let attr in this.hotelDetailForm) {
        if (this.hotelDetailForm[attr] == null) {
          this.hotelDetailForm[attr] = "";
        }
      }
    },
    cancelSubmitHotel:function(){
      this.$emit('on-hotel-cancel',true);
    },
    submitHotel(v) {
      this.$refs.hotelDetailForm.validate(valid => {
        if (valid) {
          let url = "";
          if(this.hotelDetailForm.opentime){
            this.hotelDetailForm.opentime = dateFormatUtil.format(new Date(this.hotelDetailForm.opentime),"yyyy-MM-dd");
          }
          if(this.hotelDetailForm.decoratetime){
            this.hotelDetailForm.decoratetime = dateFormatUtil.format(new Date(this.hotelDetailForm.decoratetime),"yyyy-MM-dd");
          }
          console.log(this.hotelDetailForm);
          console.log(this.hotelDetailModalType)
          if (this.hotelDetailModalType === 1) {
            url = "/hotel/update";
            this.submitLoading = true;
            let updateHotel = this.hotelDetailForm;

            this.putRequest(url, updateHotel).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("更新操作成功");

                // this.hotelManagePageVisible = true;
                // this.hotelDetailPageVisible = false;
                
                // this.init();
                this.$emit('on-hotel-success',true);

              }
            });


          }else if(this.hotelDetailModalType === 0){
            url = "/hotel/create";
            this.submitLoading = true;
            let createHotel = this.hotelDetailForm;
            createHotel.status = 0;
            if(createHotel.id) delete createHotel.id;
            this.postRequest(url, createHotel).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("添加成功");

                // this.hotelManagePageVisible = true;
                // this.hotelDetailPageVisible = false;

                // this.init();
                this.$emit('on-hotel-success',true);
              }
            });    
          }

        }
      });

    },
    hotelDetailPropertySelect(){
      console.log("=============hotelDetailPropertySelect===========");
      this.modalTitle = "属性设置";
      this.hotelDetailPropetyModalVisible = true;
      
    },
    hotelDetailTagSelect(){
      // this.modalTitle = "图标设置";
      // this.hotelDetailTagModalVisible = true;
      //获取当前的图标 回显
      console.log("============main-selectedTagsArr=================");
      console.log(this.selectedTagsArr);
      this.$refs.tagModal.openReviewModal(this.selectedTagsArr);

    },
    tagCheckedBack(res){
      this.selectedTagsArr = res;
    },
    tagsCloseHandle(event, name){
      let closeTagId = name;
      var _this = this;
      let afterTagsArr = [];
      this.selectedTagsArr.forEach(function(eachItem){  
        if(eachItem.id == closeTagId){ //跳出循环
          return;
        }
        afterTagsArr.push(eachItem);
      });
      this.selectedTagsArr = afterTagsArr;
    },

    cancelHotelReview() {
      this.hotelReviewModalVisible = false;
    },
    submitHotelReview() {
      let url = "";
      url = "/hotel/review";
      let reviewHotel = {};
      reviewHotel.hotelId = this.hotelReviewForm.reviewHotelId;
      reviewHotel.status = this.hotelReviewForm.reviewStatus;
      console.log(reviewHotel);
      this.submitLoading = true;
      this.putRequest(url, reviewHotel).then(res => {
        this.submitLoading = false;
        if (res.success === true) {
          this.$Message.success("审核操作成功");
          this.init();
          this.hotelReviewModalVisible = false;
        }
      });

      // 暂未做验证
      // this.$refs.hotelReviewForm.validate(valid => {
      //   if (valid) {
      //   }
      // });
    }

    //picture methods start
    ,
    hotelLitpicRemoveSuccess:function(res){
      if(res.flag){
        this.hotelDetailForm.litpic = res.pathStr;
      }
    },
    hotelLitpicAddSuccess:function(res){
      if(res.flag){
        this.hotelDetailForm.litpic = res.pathStr;
      }
    },
    hotelPiclistRemoveSuccess:function(res){
      if(res.flag){
        this.hotelDetailForm.piclist = res.pathStr;
      }
    },
    hotelPiclistAddSuccess:function(res){
      if(res.flag){
        this.hotelDetailForm.piclist = res.pathStr;
      }
    }
     //picture methods end

  },
  mounted() {
    // this.init();
  }
};
</script>